<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
    <title></title>
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
</head>
<body>
	<div id="music">
        <audio id="music-src" presrc="EasyBreezeThomasGreenberg" autoplay="autoplay" loop="">
            <source src="http://7xipjr.com1.z0.glb.clouddn.com/EasyBreezeThomasGreenberg.mp3" type="audio/mpeg">
            <source src="http://7xipjr.com1.z0.glb.clouddn.com/EasyBreezeThomasGreenberg.aac" type="audio/mp4"> 
        </audio>
        <div id="music-control" class="music-icon on"></div>
    </div>
    <div id="app-root"></div>

    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('.music-icon').click(function(){
                console.log(this);
                if($(this).hasClass('on')){
                    document.getElementById('music-src').pause();
                    $(this).removeClass('on');
                }else{
                    document.getElementById('music-src').play();
                     $(this).addClass('on');
                }
            })
        })
    </script>
</body>
</html>
